<template>
  <el-dialog title="换汇详情" :visible.sync="detailOpen" width="50%" append-to-body>
    <el-form ref="form" :model="detail" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="订单号: ">
              {{ detail.sn }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易类型: ">
              <dict-tag :options="dict.type.quote_type" :value="detail.scene"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卖出币种: ">
              {{ detail.sourceCurrency }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卖出数量: ">
              {{ detail.sourceAmount }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="买入币种: ">
              {{ detail.destinationCurrency }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="买入数量: ">
              {{ detail.destinationAmount }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="询价币种: ">
              {{ detail.rfqCurrency }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="询价数量: ">
              {{ detail.rfqAmount }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="换汇比例: ">
              {{ detail.rate }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易状态: ">
              <dict-tag :options="dict.type.crypto_transfers_status" :value="detail.status"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易时间:">
              {{ parseTime(detail.createTime) }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="第三方交易ID: ">
              {{ detail.rid }}
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <span>手续费详情（总计：{{ totalFeeAmount }}）</span>
      <template v-if="detail.fees" v-for="(item, index) in detail.fees ">
        <el-row :gutter="24" >
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="币种: ">
                {{ item.currency }}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="数量: ">
                {{ item.amount }}
              </el-form-item>
            </div>
          </el-col>
          <el-col v-if="item.type === 'quote_additional_fee'" :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="类型: ">
                平台收取
              </el-form-item>
            </div>
          </el-col>
          <el-col v-else :span="8">
            <div class="grid-content bg-purple">
              <el-form-item label="类型: ">
                第三方收取
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="detailOpen = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {quoteTransfersDetail} from '@/api/triones/interlaceCryptoTransfers'

export default {
  name: "quoteTransfersDetail",
  dicts: ['crypto_transfers_status', 'quote_type'],
  data() {
    return {
      detailOpen: false,
      detail: {}
    };
  },
  methods: {
    show(id) {
      this.handleInfo(id);
      this.detailOpen = true;
    },
    /** 用户详情 */
    handleInfo(id) {
      quoteTransfersDetail(id).then(response => {
        this.detail = response.data;
      })
    }
  },
  computed: {
    totalFeeAmount() {
      if (!this.detail.fees) return '0.000000';
      const total = this.detail.fees.reduce((sum, fee) => sum + (parseFloat(fee.amount) || 0), 0);
      return total.toFixed(6);
    }
  }
}
</script>

<style scoped>

</style>
